<template>
    <div class="main">
        <div class="form-box">
            <div class="img-box">
                <img src="../../assets/img/logo.png" alt="">
            </div>
             <h3 class="title">管理平台</h3>
        </div>
        <div class="form">
                <el-form ref='form' :model="form" >
                    <el-row>
                        <el-form-item>
                            <el-input class="h50" placeholder="账户名" suffix-icon="el-icon-user-solid" v-model="form.userName"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item>
                            <el-input class="h50" placeholder="账户密码" show-password v-model="form.password"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-button type="danger" class="sub-btn" @click="submit">登录</el-button>
                    </el-row>
                </el-form>
        </div>
    </div>
</template>
<script>
import {login} from '../../api/login'
import Cookies from 'js-cookie'
import { setToken ,setRoles} from '@/utils/auth'
export default {
    data () {
        return {
            form:{
                userName:'',
                password:''
            },
            rules:[]
        }
    },
    methods:{
        submit () {
            let obj = {...this.form}
           obj.password = this.$md5(obj.password)

            login(obj).then(res=>{
                if(res.status == 200) {
                    this.$message({
                        type:'success',
                        message:'登录成功'
                    })
                    
                    Cookies.set('userInfo',JSON.stringify(res.data))
                    setToken(res.data.id);

                    setRoles(JSON.stringify(res.data.authorityList))
                   
                    setTimeout(()=>{
                        
                        this.$router.push({path:'/setting/account'})
                        
                        
                        },0)
                    
                }else {
                    this.$message ({
                        type:'error',
                        message:res.msg
                    })
                }
            })
        }
    },
    mounted () {
        // console.log(this.$md5('12345'))
    }
}
</script>

<style lang="less" scoped>
    /deep/ .el-input__inner{
        height: 50px;
    }
    .main{
        width:100%;
        height: 100%;
        padding:100px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;;
        overflow:auto;
        .form-box{
            width:500px;
            display: flex;
            flex-direction: column;
            align-items: center;;
         
            .img-box{
                width: 240px;
                height: 220px;
                
            }
            .title{
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                padding:40px 0;
                width: 100%;
                color:#888888;
            }
        }
        .form{
            width:500px;
            font-size: 24px;
            .sub-btn{
                width:100%;
                font-size: 24px;
            }
        }
        
    }
</style>